{% extends 'base/front_base.html' %}

{% block title %}
    视频详情
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{% static 'css/video/video_detail.min.css' %}">
{% endblock %}

{% block main %}
    <div class="main">
        <div class="video-nav">
            <div class="nav-container">
                <h3 class="title">视频资源</h3>
                <ul class="nav-list">
                    <li class="active"><a href="#">cpp</a></li>
                    <li><a href="#">unity</a></li>
                    <li><a href="#">mysql</a></li>
                </ul>
            </div>
        </div>
        <div class="wrapper">
            <div class="container-wrapper">
                <div class="video-wrapper">
                    <div class="video-info">
                        <p class="title">我是标题我是标题我是标题</p>
                        <div class="price-group">
                            <div class="share-group">
                                <span>分享至：</span>
                                <a style="background-size: 220%;background: url({% static 'images/share.png' %}) no-repeat;background-size: 240%;"
                                   href="#" class="weixin"></a>
                                <a style="background-size: 220%;background: url({% static 'images/share.png' %}) no-repeat;background-size: 240%;background-position: -42px 0;margin-left: 10px;"
                                   href="#" class="weibo"></a>
                            </div>

                            <div class="buy-group">
                                <!--<span class="price pay">100积分</span>
                                <a href="#" class="buy-btn">立即获得</a>-->
                                <span class="price free">免费</span>
                            </div>
                        </div>
                    </div>
                    <div class="video-group dplayer"></div>
                </div>

                <div class="main-wrapper">
                    <div class="video-desc-group">
                        <p class="title">介绍</p>
                        <div class="desc">
                            我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍
                        </div>
                    </div>
                    <div class="comment-wrapper">
                        <h3 class="title">评论（0）</h3>
                        <textarea name="comment" id="" class="login-textarea comment-textarea"
                                  placeholder="立即登录，参与评论"></textarea>
                        <div class="submit-btn-group">
                            <button class="submit-btn">立即评论</button>
                        </div>

                        <ul class="comment-list">
                            <li>
                                <div class="comment-info">
                                    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg"
                                         alt="" class="avatar">
                                    <span class="author">云泥</span>
                                    <span class="pub-time">1小时前</span>
                                </div>
                                <div class="comment-content">这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
                            </li>
                            <li>
                                <div class="comment-info">
                                    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg"
                                         alt="" class="avatar">
                                    <span class="author">云泥</span>
                                    <span class="pub-time">1小时前</span>
                                </div>
                                <div class="comment-content">这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
                            </li>
                            <li>
                                <div class="comment-info">
                                    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg"
                                         alt="" class="avatar">
                                    <span class="author">云泥</span>
                                    <span class="pub-time">1小时前</span>
                                </div>
                                <div class="comment-content">这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
                            </li>
                        </ul>
                    </div>
                </div>

                {% include 'common/sidebar.html' %}
            </div>
        </div>
    </div>
    <script src="{% static 'js/hls.min.js' %}"></script>
    <script src="{% static 'js/DPlayer.min.js' %}"></script>
    <script>
        $(function () {
            const dp = new DPlayer({
                video: {
                    url: 'https://cdn.jsdelivr.net/gh/yunnibbd/m3u8/test1/playlist.m3u8',
                },
                type: 'hls',
            });
        })
    </script>
{% endblock %}
